<!DOCTYPE html>
<html>
<head>
    <title>产品款式表</title>
    #parse("sys/header.html")
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <Row :gutter="16">
            <div class="search-group">
                <i-col span="4">
                    <i-input v-model="q.pid" @on-enter="query" placeholder="商品编号"/>
                </i-col>
                <i-button @click="query">查询</i-button>
                <i-button @click="reloadSearch">重置</i-button>
            </div>
            <div class="buttons-group">
                #if($shiro.hasPermission("prostyle:info"))
                <i-button type="warning" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;查看</i-button>
                #end
                #if($shiro.hasPermission("prostyle:save"))
                <i-button type="info" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</i-button>
                #end
                #if($shiro.hasPermission("prostyle:update"))
                <i-button type="warning" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</i-button>
                #end
                #if($shiro.hasPermission("prostyle:delete"))
                <i-button type="error" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
                #end
            </div>
        </Row>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <Card v-show="!showList">
        <p slot="title">{{title}}</p>
        <i-form ref="formValidate" :model="proStyle" :rules="ruleValidate" :label-width="120">
            <Row>
                <i-col span="7">
                    <Form-item label="产品编号" prop="pid">
                        <i-input v-model="proStyle.pid" placeholder="产品编号"/>
                    </Form-item>
                </i-col>
                <i-col span="7">
                    <Form-item label="款式编号" prop="id">
                        <i-input v-model="proStyle.id" placeholder="产品编号"/>
                    </Form-item>
                </i-col>
            </Row>
            <Row>
                <i-col span="7">
                    <Form-item label="款式名称" prop="name">
                        <i-input v-model="proStyle.name" placeholder="款式名称"/>
                    </Form-item>
                </i-col>
                <i-col span="7">
                    <Form-item label="价格" prop="price">
                        <i-input v-model="proStyle.price" placeholder="款式价格"/>
                    </Form-item>
                </i-col>
            </Row>
            <Row>
                <i-col span="7">
                    <Form-item label="原价" prop="oldPrice">
                        <i-input v-model="proStyle.oldPrice" placeholder="款式原价"/>
                    </Form-item>
                </i-col>
                <i-col span="7">
                    <Form-item label="SPC价格" prop="spcPrice">
                        <i-input v-model="proStyle.spcPrice" placeholder="SPC价格"/>
                    </Form-item>
                </i-col>
            </Row>
            <Row>
                <i-col span="7">
                    <Form-item label="赠送能量" prop="giveEnergy">
                        <i-input v-model="proStyle.giveEnergy" placeholder="赠送能量"/>
                    </Form-item>
                </i-col>
                <i-col span="7">
                    <Form-item label="释放SPC" prop="spcFree">
                        <i-input v-model="proStyle.spcFree" placeholder="释放SPC"/>
                    </Form-item>
                </i-col>
            </Row>
            <Row>
                <i-col span="7">
                    <Form-item label="团队奖励" prop="giveTeam">
                        <i-input v-model="proStyle.giveTeam" placeholder="团队奖励"/>
                    </Form-item>
                </i-col>
            </Row>
            <Form-item label="备注" prop="remark">
                <i-input v-model="proStyle.remark" placeholder="备注"/>
            </Form-item>
            <Row>
                <i-col span="16">
                    <Form-item label="图片地址" prop="imageUrl">
                        <i-input v-model="proStyle.imageUrl" placeholder="图片地址"
                                 readonly/>
                    </Form-item>
                </i-col>
                <i-col span="3">
                    <Form-item :label-width="1">
                        <Upload style="width: 300px;"
                                action="../sys/oss/upload?prefix=proStyle"
                                :format="['jpg','jpeg','png']"
                                max-size="2048"
                                :on-success="handleSuccessProImage"
                                :on-format-error="handleFormatError"
                                :show-upload-list="false"
                                :on-exceeded-size="handleMaxSize">
                            <i-button icon="ios-cloud-upload-outline">上传图片</i-button>
                        </Upload>
                    </Form-item>
                </i-col>
                <i-col span="3">
                    <Form-item :label-width="1">
                        <i-button icon="eye" @click="eyeImageProImage">预览图片</i-button>
                    </Form-item>
                </i-col>
            </Row>
            <table class="table table-bordered table-striped text-center">
                <tr>
                    <td><strong>规格名</strong></td>
                    <td><strong>价格</strong></td>
                    <td><strong>数量</strong></td>
                    <td><strong>排序</strong></td>
                    <td><strong>规格描述</strong></td>
                    <td><strong>操作</strong></td>
                </tr>
                <tr v-for="(data,index) in dimensions">
                    <td style="display: none">{{index}}</td>
                    <td>{{data.name}}</td>
                    <td>{{data.price}}</td>
                    <td>{{data.number}}</td>
                    <td>{{data.sort}}</td>
                    <td>{{data.describe}}</td>
                    <td>
                        <i-button type="error" @click="delDimensions(index)">删除
                        </i-button>
                    </td>
                </tr>
            </table>
            <Form-item>
                <i-button type="primary" style="margin-left: 500px" @click="handleSubmit('formValidate')">提交</i-button>
                <i-button type="warning" @click="reload" style="margin-left: 8px"/>返回</i-button>
                <i-button type="ghost" @click="handleReset('formValidate')"
                          style="margin-left: 8px">重置
                </i-button>
            </Form-item>
        </i-form>
    </Card>
    <Card v-show="!showList">
        <p slot="title">添加规格</p>
        <table class="table table-bordered table-striped text-center">
            <tr>
                <td><strong>规格名</strong></td>
                <td><strong>价格</strong></td>
                <td><strong>数量</strong></td>
                <td><strong>排序</strong></td>
                <td><strong>规格描述</strong></td>
            </tr>
            <tr>
                <td>
                    <i-input v-model="dname" placeholder="规格名"/>
                </td>
                <td>
                    <i-input v-model="dprice" placeholder="价格"/>
                </td>
                <td>
                    <Input-number :min="0" :step="1" v-model="dnumber" placeholder="数量"/>
                </td>
                <td>
                    <Input-number :min="0" :step="1" v-model="dsort" placeholder="排序"/>
                </td>
                <td>
                    <i-input v-model="ddescribe" placeholder="规格描述"/>
                </td>
            </tr>
        </table>
        <i-button type="info" @click="addDimensions" style="margin-left: 650px">添加规格</i-button>
    </Card>
</div>

<script src="${rc.contextPath}/js/product/prostyle.js?_${date.systemTime}"></script>
</body>
</html>